<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>反馈中心 - 阅视界</title>
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="feedback.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
</head>
<body>
    <header>
        <div class="logo">阅视界</div>
        <ul class="nav-menu">
            <li><a href="index.html">首页</a></li>
            <li><a href="scoring-page.html">即时评分</a></li>
            <li><a href="history-review.html">评分历史</a></li>
            <li><a href="data-analysis.html">数据分析</a></li>
            <li><a href="feedback.html" class="active">反馈中心</a></li>
            <li><a href="guide.html">使用指南</a></li>
        </ul>
        <div class="user-actions">
            <div class="user-info" style="display: none;">
                <span id="username-display" style="cursor: pointer;"></span>
            </div>
            <div class="auth-buttons">
                <button class="primary" onclick="window.location.href='auth.html#login'">登录</button>
                <button onclick="window.location.href='auth.html#register'">注册</button>
            </div>
        </div>
    </header>
 <!-- 用户详情模态窗口 -->
    <div id="user-modal" class="modal">
        <div class="modal-content user-modal-content">
            <span class="close-button">&times;</span>
            <div class="user-profile-header">
                <div class="user-avatar">
                    <img src="images/avatar.svg" alt="用户头像">
                </div>
                <h2 id="modal-username"></h2>
            </div>
            <div class="user-details">
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-envelope"></i>
                    </div>
                    <div class="detail-info">
                        <label>邮箱</label>
                        <span id="modal-email"></span>
                    </div>
                </div>
                <div class="detail-item">
                    <div class="detail-icon">
                        <i class="fas fa-fingerprint"></i>
                    </div>
                    <div class="detail-info">
                        <label>用户ID</label>
                        <span id="modal-userid"></span>
                    </div>
                </div>
            </div>
            <div class="logout-section">
                <button class="logout-btn" onclick="handleLogout()">
                    <i class="fas fa-sign-out-alt"></i>
                    退出登录
                </button>
            </div>
        </div>
    </div>
    <main class="feedback-container">
        <h1>用户反馈</h1>

        <div class="feedback-content">
            <div class="rating-section">
                <h3><i class="fas fa-smile"></i> 总体满意度</h3>
                <div class="star-rating">
                    <span class="star" data-rating="1">☆</span>
                    <span class="star" data-rating="2">☆</span>
                    <span class="star" data-rating="3">☆</span>
                    <span class="star" data-rating="4">☆</span>
                    <span class="star" data-rating="5">☆</span>
                    <span class="rating-value">0 分</span>
                </div>
            </div>

            <div class="rating-section">
                <h3><i class="fas fa-chart-line"></i> 评分准确性</h3>
                <div class="star-rating">
                    <span class="star" data-rating="1">☆</span>
                    <span class="star" data-rating="2">☆</span>
                    <span class="star" data-rating="3">☆</span>
                    <span class="star" data-rating="4">☆</span>
                    <span class="star" data-rating="5">☆</span>
                    <span class="rating-value">0 分</span>
                </div>
            </div>

            <div class="rating-section">
                <h3><i class="fas fa-user-check"></i> 用户体验</h3>
                <div class="star-rating">
                    <span class="star" data-rating="1">☆</span>
                    <span class="star" data-rating="2">☆</span>
                    <span class="star" data-rating="3">☆</span>
                    <span class="star" data-rating="4">☆</span>
                    <span class="star" data-rating="5">☆</span>
                    <span class="rating-value">0 分</span>
                </div>
            </div>

            <div class="feedback-detail">
                <h3><i class="fas fa-comment-dots"></i> 详细反馈</h3>
                <textarea placeholder="请详细描述您的使用体验和建议..." maxlength="500"></textarea>
                <div class="word-count">0/500</div>
            </div>

            <div class="contact-info">
                <h3>联系方式（选填）</h3>
                <div class="form-group">
                    <label for="name">姓名</label>
                    <input type="text" id="name" placeholder="请输入您的姓名">
                </div>
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="tel" id="phone" placeholder="请输入您的联系电话">
                </div>
                <div class="form-group">
                    <label for="email">邮箱</label>
                    <input type="email" id="email" placeholder="请输入您的邮箱地址">
                </div>
            </div>

            <button class="submit-btn">提交反馈</button>
        </div>
    </main>
    <script src="feedback.js"></script>
    <script src="common.js"></script>
</body>
</html> 